<template>
    <div class="schoolList pl10 pr10 flex-col" style="height:calc( 100vh - 118px )">
        <!-- 快捷搜索 -->
        <el-tabs v-model="tabIndex" @tab-click="handleClick" style="height:56px;">
            <el-tab-pane :label="tab.name + (tab.num ? `(${tab.num})` : '')" :key="tabI" v-for="(tab, tabI) in tabbars"> </el-tab-pane>
        </el-tabs>
        <!-- 搜索条件 -->
        <div class="table-form flex-row-sb-c" style="min-height:40px;padding-bottom:15px; ">
            <div class="left flex-row-l-c">
                <el-form inline ref="form" :model="form" label-width="80px">
                    <el-form-item label="商品分类" class="mb0">
                        <el-input v-model="form.category" placeholder="商品分类" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型" class="mb0">
                        <el-select v-model="form.type" size="mini" placeholder="请选择商品类型">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item class="mb0">
                        <el-button type="info" size="mini" @click="searchEvent">查 询</el-button>
                        <el-button size="mini" @click="clearSearch">清空筛选条件</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 表单增删查改 -->
            <div class="right flex-row-r-c" style="flex:1">
                <sc-pop-button title="点击确认同步数据" type="primary" size="mini ">同步</sc-pop-button>
                <el-button type="warning" size="mini ">数据源</el-button>
                <el-button size="mini">上架</el-button>
                <el-button size="mini">下架</el-button>
                <el-button size="mini">推荐</el-button>
            </div>
        </div>

        <!-- 表格数据 -->
        <el-table border :data="tableData[0].list" height="100%" style="width: 100% ;flex:1;overflow-y:auto;" @selection-change="handleSelectionChange">
            <el-table-column width="45" align="center" type="selection"></el-table-column>
            <el-table-column label="序号" width="55" align="center" type="index"></el-table-column>
            <!-- 表格内容 -->
            <el-table-column label="姓名" prop="name" width="100" align="center"> </el-table-column>
            <el-table-column label="部门" prop="department" align="center"></el-table-column>
            <el-table-column label="角色" prop="role" align="center">
                <template slot-scope="scope">
                    <el-tag> {{ scope.row.role }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="手机号" prop="phone" align="center"> </el-table-column>
            <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                    <sc-pop-button type="text" size="mini">删除</sc-pop-button>
                    <el-button type="text" size="mini" @click="handleEdit(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="flex-row-c-c " style="height:70px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 30, 40, 60, 80, 100, 200, 300, 400]"
                :page-size="100"
                layout="sizes, prev, pager, next"
                :total="1000"
                background
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
// import buttonSearch from "@/components/common/button-search.vue";
export default {
    components: {
        // buttonSearch
    },
    data() {
        return {
            multipleSelection: [],
            tableData: [],
            tabIndex: 0,
            tabbars: [
                { name: "全部", num: 1000 },
                { name: "已关注", num: 500 },
                { name: "未关注", num: 500 }
            ],
            form: {
                name: "",
                code: "",
                type: "",
                category: ""
            },
            currentPage: 5
        };
    },
    created() {
        this.getData();
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        //生成数据
        getData() {
            for (let i = 0; i < this.tabbars.length; i++) {
                this.tableData.push({
                    currentPage: 1,
                    list: []
                });
                for (let j = 0; j < 20; j++) {
                    this.tableData[i].list.push({
                        id: i,
                        name: "望夏雨",
                        department: "技术部",
                        phone: "13522322233",
                        role: "学生"
                    });
                }
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 加载数据
        handleClick(tab, event) {
            console.log(tab.index);
        },
        // 清空筛选条件
        clearSearch() {
            Object.keys(this.form).forEach(key => {
                this.form[key] = "";
            });
        },
        // 搜索事件
        searchEvent(e = false) {
            // 简单搜索
            if (typeof e === "string") {
                return console.log("简单搜索", e);
            }
            // 高级搜索
            console.log("高级搜索");
        },
        // 删除商品
        deleteItem(index) {
            this.$confirm("是否删除该商品?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.tableData[this.tabIndex].list.splice(index, 1);
                this.$message({
                    type: "success",
                    message: "删除成功!"
                });
            });
        },
        // 修改列表
        handleEdit(row) {
            this.$log.debug(row);
        }
    }
};
</script>

<style lang="scss" scoped>
.schoolList {
}
</style>
